<template>
  <div class="pageBox">
    <div class="contentBox">
      <el-form
        :model="formInline"
        label-width="100px"
        :label-position="`right`"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="变电站名称" lable-width="110px">
              <el-input
                size="mini"
                v-model="formInline.stationName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="线路名称">
              <el-input
                size="mini"
                v-model="formInline.lineName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配变名称">
              <el-input
                size="mini"
                v-model="formInline.transformerName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="台区编号">
              <el-input
                size="mini"
                v-model="formInline.areaCode"
                placeholder="请输入编号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="终端ESN">
              <el-input
                size="mini"
                v-model="formInline.terminalESN"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="终端类型">
              <el-select
                size="mini"
                v-model="formInline.terminalType"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="终端厂家">
              <el-select
                size="mini"
                v-model="formInline.terminalManufacturer"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in FactoryNameOptions"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="终端投运日期">
              <el-date-picker
                size="mini"
                v-model="formInline.commissioningDate"
                type="date"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="数据日期">
              <el-date-picker
                size="mini"
                v-model="formInline.dataDateRange"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="投运状态">
              <el-input
                size="mini"
                v-model="formInline.commissioningStatus"
                placeholder="审批人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="综合得分">
              <el-input
                style="width: 65px"
                v-model="formInline.scoreRangeStart"
                placeholder="%"
              ></el-input
              >~
              <el-input
                style="width: 65px"
                v-model="formInline.scoreRangeEnd"
                placeholder="%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否频繁投退" label-width="100px">
              <el-select
                size="mini"
                v-model="formInline.frequentRetirement"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="在线率">
              <el-input
                style="width: 65px"
                v-model="formInline.onlineRateRangeStart"
                placeholder="%"
              ></el-input
              >~
              <el-input
                style="width: 65px"
                v-model="formInline.onlineRateRangeEnd"
                placeholder="%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="app版本是否一致" label-width="130px">
              <el-select
                size="mini"
                v-model="formInline.appVersionConsistency"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in appOptions"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6">
            <el-button  @click="getTableData" type="primary" icon="el-icon-search">查询</el-button>
            <el-button @click="uploadFn"  type="primary" icon="el-icon-download">导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          align="center"
          prop="orgname03"
          label="所属城市"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="sname"
          label="变电站名称"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="fname"
          label="线路名称"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="trname"
          label="配变名称"
          width="200"
        >
        </el-table-column>
        <el-table-column align="center" prop="aid" label="台区编号" width="200">
        </el-table-column>
        <el-table-column
          align="center"
          prop="term_ESN"
          label="终端ESN"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="term_TYPE"
          label="终端类型"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="factory_NAME "
          label="终端厂家"
          width="300"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="run_STATE_TIME"
          label="投运日期"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="data_TIME"
          label="数据日期"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="run_STATE"
          label="投运状态"
          width="120"
        >
          <template slot-scope="scope">
            {{ scope.row.run_STATE == 0 ? '未激活' : '投运' }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="comprehensive_SCORE"
          label="综合得分"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="jc_STATUS"
          label="app版本是否一致"
          width="220"
        >
          <template slot-scope="scope">
            {{ scope.row.jc_STATUS == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="on_LINE_RATE"
          label="在线率"
          width="120"
        >
          <template slot-scope="scope">
            {{ (scope.row.on_LINE_RATE * 100).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="pftt_STATUS"
          label="是否频繁投退"
          width="120"
        >
          <template slot-scope="scope">
            {{ run_STATE[scope.row.pftt_STATUS] }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="integrety_RATE"
          label="量测完整率"
          width="120"
        >
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="详细分析"
          width="100"
        >
          <template v-slot="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
              "
                @click="handleClick(scope.row)"
            >
              <img
                style="width: 12px; height: 12px; margin-right: 5px"
                src="../../../assets/img/iconImgs/check.png"
                alt=""
              />
              <div
                style="color: #118b7d; font-size: 12px"
              
              >
                查看
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationBox">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper, sizes"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 组件 -->
     <detailDialog ref="detailRef"></detailDialog>
  </div>
</template>

<script>
import listController from '@/jsonData/listController.json'
import FactoryNameList from '@/jsonData/FactoryNameList.json'
import { query, getFactoryNameList } from '@/api/testPage'
import detailDialog from '../components/index.vue'
export default {
  components:{
    detailDialog
  },
  data() {
    return {
      formInline: {
        stationName: '', // 变电站名称
        lineName: '', // 线路名称
        transformerName: '', // 配变名称
        areaCode: '', // 台区编号
        terminalESN: '', // 终端ESN
        terminalType: ['1'], // 终端类型
        terminalManufacturer: '', // 终端厂家
        commissioningDate: '', // 终端投运日期
        dataDateRange: '', // 数据日期范围
        commissioningStatus: '', // 投运状态
        scoreRange: '', // 综合得分范围
        appVersionConsistency: '', // app版本是否一致
        onlineRateRange: '', // 在线率范围
        frequentRetirement: '' // 是否频繁投退
      },
      value1: '',
      value: '',
      options: [
        {
          text: '融合终端',
          value: '1'
        }
      ],
      appOptions: [
        {
          text: '是',
          value: '0'
        },
        {
          text: '否',
          value: '1'
        }
      ],
      FactoryNameOptions: [], // 终端厂家下拉数据
      scorePart1: '',
      scorePart2: '',
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: '',
      run_STATE: {
        0: '未激活',
        1: '投运',
        2: '调试'
      }
    }
  },
  created() {
    this.getTableData()
    this.getFactoryNameOptions()
  },
  methods: {
    handleClick(row) {
      this.$refs.detailRef.isShow()
      console.log(row)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getTableData()
    },
    getTableData() {
      // console.log('11111111', listController)
      this.total = listController.total
      this.tableData = listController.value
      const params = {
        orgType: 2,
        orgId: '94af45f37490d0470174911f8087000b',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      query(params).then((res) => {
        if (res.code) {
          this.tableData = res.data;
          this.total=res.total
        }
      })
    },
    // 获取终端厂家下拉数据
    getFactoryNameOptions() {
      console.log('-------', FactoryNameList)
      this.FactoryNameOptions = FactoryNameList.data.map((item) => ({
        text: item,
        value: item
      }))
      const params = {
        factoryName: this.formInline.terminalManufacturer
      }
      getFactoryNameList(params).then((res) => {
        if (res.code) {
          // this.FactoryNameOptions = res.data.map((item) => ({
          //   text: item,
          //   value: item
          // }));
        }
      })
    },
    uploadFn(){
      this.$message({
            type: 'success',
            message: '导出成功!'
          });
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table th {
  background-color: #118b7d !important;
  color: white !important;
  /* Optional: Change text color to white for better contrast */
}

.main-content,
.page {
  background-color: rgb(16, 190, 190) !important;
}

.pageBox {
  background: #fff;
  padding: 12px;
}

.contentBox {
  background-color: #f9f9f9;
}

::v-deep .el-form-item__label {
  font-size: 14px !important;
}

::v-deep .el-button {
  font-size: 12px !important;
  border: none !important;
}

.paginationBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2% 0;
}

.flexBox {
  width: 80%;
  display: flex;
  justify-content: space-around;
}

.serchIcon,
.uploadIcon {
  cursor: pointer;
  width: 70px;
  height: 30px;
  border-radius: 6px;
  background-color: #118b7d;
  color: #f9f9f9;
  font-size: 12px;
  display: flex;
  align-items: center;

  img {
    width: 12px;
    height: 12px;
    margin: 0 10px 0 10px;
  }
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 150px;
}

::v-deep .el-input .el-input--mini .el-input--suffix {
  width: 150px;
}

::v-deep .el-input--mini {
  width: 150px !important;
}

::v-deep.el-input .el-input__inner {
  height: 26px !important;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #118b7d!important;
    color: #FFF;
}
::v-deep.el-pager li.active {
    color: #118b7d!important;
    cursor: default;
}
::v-deep.el-pager li.hover {
    color: #118b7d!important;
    cursor: default;
}
</style>
